<template>
  <div class="tc-checkbox-group">
    <el-checkbox-group
    :disabled="item && item.disabled"
      @change="handleChange"
      v-model="changeValue"
      v-bind="{ ...item }"
    >
      <template v-for="option in newOptions">
        <div v-if="!isHideQuota(option)"
             :key="option.value"
             class="show-vote"
             :class="[
           item.config.inline ? 'inline-block' : 'block',
           isChecked(option.value) ? 'checked' : ''
           ]"
        >
          <t-checkbox
            :label="option.value"
            :disabled="option.quotaSetting && getSurplusQuota(option) <= 0"
          >
              <span v-if="getSurplusQuota(option) <= 0 && item.config.quotaBlankWarning">{{
                  item.config.quotaBlankWarning
                }}</span>
            <span v-else>{{ option.label }}</span>
            <span class="text-muted" v-if="showQuota(option)">(余{{ getSurplusQuota(option) }})</span>
          </t-checkbox>

          <div class="vote-wrap">
            <el-input
            :disabled="item && item.disabled"
              v-if="option.value === 0 && isChecked(option.value)"
              v-model="otherInputValue"
              class="other-input"
            />
            <vote
              :value="option.value"
              :vote-list="voteList"
              :total-vote="totalVote"
              v-if="item.config.showVoteResult"
            />
          </div>
        </div>
      </template>
      <!--      <template v-else>
              <template v-for="option in item.config.options">
                <el-checkbox-button
                  v-if="!isHideQuota(option)"
                  :key="option.value"
                  :label="option.value"
                  :style="{
                    display: item['config'].inline ? 'inline-block' : 'block',
                  }"
                >
                  <span v-if="option.quota <= 0 && item.config.quotaBlankWarning">{{
                    item.config.quotaBlankWarning
                  }}</span>
                  <span v-else>{{ option.label }}</span>
                  <span class="text-base-color" v-if="showQuota(option)"
                    >(余{{ option.quota }})</span
                  >
                </el-checkbox-button>
              </template>
            </template>-->
    </el-checkbox-group>
  </div>
</template>

<script>
import Vote from "../TVote/vote"
import mixin from "../mixin"
import VoteMixin from "../TVote/VoteMixin"
import TCheckbox from "./TCheckbox"
import optionQuotaMixin from "../mixins/OptionQuotaMixin"

export default {
  name: "TCheckboxGroup",
  mixins: [mixin, VoteMixin, optionQuotaMixin],
  components: {
    Vote,
    TCheckbox
  },
  props: ["models"],
  data() {
    return {
      otherInputValue: ""
    }
  },
  watch: {
    otherInputValue: {
      deep: true,
      handler(val) {
        this.models[`${this.item.vModel}other`] = val

        this.$emit("other-input-change", this.changeValue, this.item)
      }
    }
  },
  mounted() {
    if (this.models) {
      this.otherInputValue = this.models[`${this.item.vModel}other`]
    }
  },
  methods: {
    isChecked(val) {
      return this.changeValue.indexOf(val) > -1
    },
    handleChange(val) {
      console.log(val,'val')
      if (!val.length) {
        return
      }

      this.handleArrayVote(this.value)
      const {exclusiveChoiceApiCodes, withExclusiveChoice} = this.item.config
      console.log(this.item.config,'this.item.config-----')
      console.log(exclusiveChoiceApiCodes,'exclusiveChoiceApiCodes')
      //是否开启了多选互斥
      if (withExclusiveChoice) {
        // 变化的值
        const changeVal = val[val.length - 1]
        // 选中还是取消
        const isChecked = val.findIndex(
          (e) => e.toString() === changeVal.toString()
        )

        // 是否是互斥
        const isExclusive = exclusiveChoiceApiCodes.findIndex(
          (e) => e.toString() === changeVal.toString()
        )


        // 选中 并且 互斥
        if (isChecked > -1 && isExclusive > -1) {

          const isExclusive = val.filter((e) => {
            const index = exclusiveChoiceApiCodes.findIndex(
              (ex) => ex.toString() === e.toString()
            )
            return index >-1
          })
          console.log(isExclusive,'isExclusive2222---')
            //互斥项不是其他这个选项，要清空其他选项里的输入框内容
            //如果其他也被选为互斥项并且当前被选中的话就不清空
           
            if(!isExclusive.includes(0)){
              this.otherInputValue =''
            }
          this.$emit("input", isExclusive)
          
        }

        // 选中 并且 不互斥
        if (isChecked > -1 && isExclusive === -1) {
          // 不是互斥的值
          const noExclusive = val.filter((e) => {
            const index = exclusiveChoiceApiCodes.findIndex(
              (ex) => ex.toString() === e.toString()
            )
            return index < 0
          })
          this.$emit("input", noExclusive)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tc-checkbox-group .el-checkbox {
  height: auto;
  padding: 5px 10px;
  line-height: 28px !important;
}

.block {
  margin-bottom: 10px;

  .el-checkbox {
    width: 100%;
  }

  .other-input {
    margin-top: 10px;
  }
}

.inline-block {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 10px;
  vertical-align: top;


  .el-checkbox {
    width: 100%;
  }

  .other-input {
    margin-top: 10px;
  }
}

.inline-block.show-vote {
  min-width: 156px;
}

.show-vote {
  .other-input {
    margin-top: 0;
  }
}

@media screen and (max-width: 414px) {
  .inline-block.show-vote:nth-child(even) {
    margin-right: 0;
  }
}

.show-vote {
  border-radius: 3.5px;
  border: 1px solid #dcdfe6;

  .vote-wrap {
    padding: 5px 10px;
  }

  .vote-wrap:empty {
    padding: 0;
  }
}

.checked {
  border-color: #1890ff;
}


::v-deep .el-checkbox__label {
  width: 90% !important;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  display: inline-block;
  vertical-align: middle;
}
</style>
